<template>
  <div class="main-left">
    <div class="top">商品分类</div>
    <div class="list">
      <div class="part thumb overOneSpec" v-for="item in tagList">
        {{ item.title }}
      </div>
    </div>
  </div>

  <div class="main-left">
    <div class="top">
      <div class="dot"></div>
      店铺商品销售排行榜
    </div>
    <div class="list">
      <div class="part thumb" v-for="item in hotList">
        <div class="img">
          <img v-lazy="item.img" />
        </div>
        <div class="content">
          <div class="title overOneSpec">{{ item.title }}</div>
          <div class="bottom">
            <span>￥{{ item.price }}</span>
            <span>{{ item.buyNum }}人付款</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { publicUrl } from "@/utils/util";
import { ref } from "vue";
const tagList = ref<
  Array<{
    title: string;
  }>
>([
  { title: `秋季新品` },
  { title: `加绒衬衫` },
  { title: `纯棉休闲` },
  { title: `男士商务` },
  { title: `竹纤维` },
  { title: `T恤` },
  { title: `西裤` },
  { title: `冬款针织衫` },
  { title: `男女同款` },
  { title: `无痕衬衫` },
  { title: `未分类` },
]);
const hotList = ref<
  Array<{
    title: string;
    img: string;
    price: number;
    buyNum: string;
  }>
>([
  {
    title: `夏季MTM定制化男衬衫夏季MTM定制化男衬衫`,
    img: publicUrl( `/images/Special1.png` ),
    price: 59.9,
    buyNum: `300+`,
  },
  {
    title: `夏季MTM定制化男衬衫夏季MTM定制化男衬衫`,
    img: publicUrl( `/images/Special2.png` ),
    price: 59.9,
    buyNum: `300+`,
  },
]);
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
